import React, { Component } from "react";
import { PageHeader, Statistic, Descriptions, Steps, Result } from "antd";
import { SmileOutlined } from "@ant-design/icons";
import "antd/dist/antd.css";
import { invoiceDetail } from "../../../services/auth";
import StepDetail1 from "./page1";
import StepDetail2 from "./page2";
import StepDetail3 from "./page3";
import StepDetail4 from "./page4";

const { Step } = Steps;

class InvoiceDetail extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.value);
    this.state = {
      invoice: {},
      orderInfo: [],
      current: -1,
      steps: [],
    };
    this.order_id = this.props.value.id;
  }

  onChange = (current) => {
    //console.log('onChange:', current);
    this.setState({ current });
  };

  stateCheck(status) {
    if (status === "待收货" || status === "待发货") {
      return [
        {
          key: 0,
          title: "询价",
          status: "finish",
        },
        {
          key: 1,
          title: "报价",
          status: "finish",
        },
        {
          key: 2,
          title: "发货",
          status: "process",
        },
        {
          key: 3,
          title: "付款",
          status: "wait",
        },
      ];
    } else if (status === "待付款") {
      return [
        {
          key: 0,
          title: "询价",
          status: "finish",
        },
        {
          key: 1,
          title: "报价",
          status: "finish",
        },
        {
          key: 2,
          title: "发货",
          status: "finish",
        },
        {
          key: 3,
          title: "付款",
          status: "process",
        },
      ];
    } else {
      return [
        {
          key: 0,
          title: "询价",
          status: "finish",
        },
        {
          key: 1,
          title: "报价",
          status: "finish",
        },
        {
          key: 2,
          title: "发货",
          status: "finish",
        },
        {
          key: 3,
          title: "付款",
          status: "finish",
        },
      ];
    }
  }

  componentDidMount() {
    invoiceDetail(this.order_id).then(
      (response) => {
        console.log(response.data);
        this.setState({
          invoice: response.data,
          orderInfo: response.data.invoicedtl,
          steps: this.stateCheck(response.data.order_status),
        });
        console.log(this.state.steps);
      },
      (error) => {
        console.log("error");
      }
    );
  }

  render() {
    const { current } = this.state;

    let stepChange =
      this.state.current === -1 ? (
        <Result
          icon={<SmileOutlined />}
          title="现在，我们完成了所需要的步骤！"
        />
      ) : this.state.current === 0 ? (
        <StepDetail1 info={this.state.invoice} />
      ) : this.state.current === 1 ? (
        <StepDetail2 info={this.state.invoice} />
      ) : this.state.current === 2 ? (
        <StepDetail3 info={this.state.invoice} />
      ) : this.state.current === 3 ? (
        <StepDetail4 info={this.state.invoice} />
      ) : (
        <div />
      );

    const Content = ({ children, extra }) => (
      <div className="content">
        <div className="main">{children}</div>
        <div className="extra">{extra}</div>
      </div>
    );

    return (
      <div>
        <PageHeader
          className="site-page-header-responsive"
          title="财务详情"
          subTitle={this.state.invoice.id}
        >
          <Content
            extra={
              <div
                style={{
                  display: "flex",
                  width: "max-content",
                  justifyContent: "flex-end",
                  margin: "24px 0px 24px 0px",
                  textAlign: "center",
                }}
              >
                <Statistic
                  title="状态"
                  value={this.state.invoice.order_status}
                  style={{ marginRight: 96 }}
                />
                <Statistic
                  title="订单计价"
                  prefix="￥"
                  value={this.state.invoice.total_price}
                  valueStyle={{ color: "#cf1322" }}
                />
              </div>
            }
          >
            {
              <Descriptions size="small" column={2}>
                <Descriptions.Item label="公司">{`${this.state.invoice.company_name}(${this.state.invoice.company_id})`}</Descriptions.Item>
                <Descriptions.Item label="操作员">
                  {`${this.state.invoice.operator_name}(${this.state.invoice.operator_id})`}
                </Descriptions.Item>
                <Descriptions.Item label="创建时间">
                  {this.state.invoice.billing_date}
                </Descriptions.Item>
              </Descriptions>
            }
          </Content>
        </PageHeader>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          {this.state.steps.map((step) => (
            <Step title={step.title} status={step.status} />
          ))}
        </Steps>
        <div>{stepChange}</div>
      </div>
    );
  }
}

export default InvoiceDetail;
